{% extends 'base.html' %}
{% load static %}

{% block title %}订单详情 - 商城系统{% endblock %}

{% block extra_css %}
<style>
    .order-detail-container {
        background-color: #f8f9fa;
        padding: 30px 0;
        min-height: 70vh;
    }
    
    .order-detail-card {
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        margin-bottom: 20px;
        padding: 20px;
    }
    
    .order-detail-header {
        border-bottom: 1px solid #eee;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    
    .order-detail-title {
        font-size: 1.3rem;
        font-weight: 600;
        margin-bottom: 10px;
        color: #333;
    }
    
    .order-detail-meta {
        display: flex;
        justify-content: space-between;
    }
    
    .order-status {
        font-weight: 600;
    }
    
    .status-badge {
        display: inline-block;
        padding: 3px 8px;
        border-radius: 3px;
        font-size: 12px;
        font-weight: 600;
    }
    
    .order-timeline {
        position: relative;
        padding-left: 20px;
    }
    
    .order-timeline::before {
        content: '';
        position: absolute;
        left: 5px;
        top: 8px;
        height: calc(100% - 20px);
        width: 1px;
        background-color: #ddd;
    }
    
    .timeline-item {
        position: relative;
        margin-bottom: 20px;
    }
    
    .timeline-item:last-child {
        margin-bottom: 0;
    }
    
    .timeline-item::before {
        content: '';
        position: absolute;
        left: -20px;
        top: 8px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #0d6efd;
    }
    
    .timeline-item.active::before {
        background-color: #28a745;
    }
    
    .timeline-item.inactive::before {
        background-color: #adb5bd;
    }
    
    .timeline-date {
        color: #666;
        font-size: 14px;
    }
    
    .order-info-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .order-info-item {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px dashed #eee;
    }
    
    .order-info-item:last-child {
        border-bottom: none;
    }
    
    .order-product-item {
        display: flex;
        padding: 15px 0;
        border-bottom: 1px solid #eee;
    }
    
    .order-product-item:last-child {
        border-bottom: none;
    }
    
    .product-img {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 4px;
    }
    
    .product-info {
        flex: 1;
        padding-left: 15px;
    }
    
    .product-name {
        font-size: 16px;
        margin-bottom: 5px;
    }
    
    .product-price {
        color: #e4393c;
        font-weight: 600;
    }
    
    .address-card {
        padding: 15px;
        border: 1px solid #eee;
        border-radius: 5px;
        margin-top: 10px;
    }
</style>
{% endblock %}

{% block content %}
<div class="order-detail-container">
    <div class="container">
        <div class="mb-3">
            <a href="{% url 'order_list' %}" class="text-decoration-none">
                <i class="bi bi-arrow-left"></i> 返回订单列表
            </a>
        </div>
        
        <!-- 订单状态卡片 -->
        <div class="order-detail-card">
            <div class="order-detail-header">
                <h1 class="order-detail-title">订单状态</h1>
                <div class="order-detail-meta">
                    <span class="order-id">订单号: {{ order.order_id }}</span>
                    <span class="order-status">
                        状态: 
                        <span class="status-badge bg-{{ order.order_status_display_color }}">
                            {{ order.get_order_status_display }}
                        </span>
                    </span>
                </div>
            </div>
            
            <!-- 订单时间线 -->
            <div class="order-timeline">
                <div class="timeline-item active">
                    <div class="timeline-title">订单已创建</div>
                    <div class="timeline-date">{{ order.created_time|date:"Y-m-d H:i:s" }}</div>
                </div>
                
                {% if order.order_status == 'CANCELLED' %}
                    <div class="timeline-item active">
                        <div class="timeline-title">订单已取消</div>
                        <div class="timeline-date">{{ order.updated_time|date:"Y-m-d H:i:s" }}</div>
                    </div>
                {% else %}
                    <div class="timeline-item {% if order.order_status == 'PENDING' %}inactive{% else %}active{% endif %}">
                        <div class="timeline-title">已付款</div>
                        <div class="timeline-date">
                            {% if order.pay_time %}
                                {{ order.pay_time|date:"Y-m-d H:i:s" }}
                            {% else %}
                                待支付
                            {% endif %}
                        </div>
                    </div>
                    
                    <div class="timeline-item {% if order.order_status == 'PENDING' or order.order_status == 'PAID' %}inactive{% else %}active{% endif %}">
                        <div class="timeline-title">已发货</div>
                        <div class="timeline-date">
                            {% if order.deliver_time %}
                                {{ order.deliver_time|date:"Y-m-d H:i:s" }}
                            {% else %}
                                待发货
                            {% endif %}
                        </div>
                    </div>
                    
                    <div class="timeline-item {% if order.order_status == 'COMPLETED' %}active{% else %}inactive{% endif %}">
                        <div class="timeline-title">已完成</div>
                        <div class="timeline-date">
                            {% if order.receive_time %}
                                {{ order.receive_time|date:"Y-m-d H:i:s" }}
                            {% else %}
                                待收货
                            {% endif %}
                        </div>
                    </div>
                {% endif %}
            </div>
            
            <!-- 订单操作按钮 -->
            {% if order.order_status == 'PENDING' %}
                <div class="mt-4 d-flex gap-2">
                    <a href="{% url 'payment' order_id=order.order_id %}" class="btn btn-primary">去支付</a>
                    <a href="{% url 'cancel_order' order_id=order.order_id %}" 
                       class="btn btn-outline-danger"
                       onclick="return confirm('确定要取消此订单吗？')">取消订单</a>
                </div>
            {% elif order.order_status == 'SHIPPING' %}
                <div class="mt-4">
                    <a href="{% url 'confirm_receipt' order_id=order.order_id %}" 
                       class="btn btn-success"
                       onclick="return confirm('确定已收到商品吗？')">确认收货</a>
                </div>
            {% endif %}
        </div>
        
        <!-- 商品信息卡片 -->
        <div class="order-detail-card">
            <h2 class="order-detail-title">商品信息</h2>
            
            <div class="order-products">
                {% for item in order.items.all %}
                    <div class="order-product-item">
                        <img src="{{ item.product.get_main_image_url }}" alt="{{ item.product.name }}" class="product-img">
                        <div class="product-info">
                            <h5 class="product-name">{{ item.product.name }}</h5>
                            <div>
                                <span class="product-price">¥{{ item.price }}</span>
                                <span class="text-muted">x {{ item.quantity }}</span>
                            </div>
                        </div>
                        <div class="text-end">
                            <div class="product-price">¥{{ item.total_price }}</div>
                            {% if order.order_status == 'COMPLETED' and item.comment_status == 'NOT_COMMENTED' %}
                                <!-- 待实现: 评价功能 -->
                                <a href="javascript:void(0)" class="btn btn-outline-secondary btn-sm mt-2">评价</a>
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
            </div>
            
            <div class="mt-4">
                <ul class="order-info-list">
                    <li class="order-info-item">
                        <span>商品总价</span>
                        <span>¥{{ order.total_amount }}</span>
                    </li>
                    <li class="order-info-item">
                        <span>运费</span>
                        <span>¥{{ order.shipping_fee }}</span>
                    </li>
                    {% if order.discount > 0 %}
                    <li class="order-info-item">
                        <span>优惠</span>
                        <span>-¥{{ order.discount }}</span>
                    </li>
                    {% endif %}
                    <li class="order-info-item">
                        <span class="fw-bold">实付款</span>
                        <span class="product-price fs-5">¥{{ order.actual_amount }}</span>
                    </li>
                </ul>
            </div>
        </div>
        
        <!-- 收货信息卡片 -->
        <div class="order-detail-card">
            <h2 class="order-detail-title">收货信息</h2>
            
            <div class="address-card">
                <div>
                    <span class="fw-bold">{{ order.receiver }}</span>
                    <span class="ms-2">{{ order.phone }}</span>
                </div>
                <div class="mt-2">
                    {{ order.province }} {{ order.city }} {{ order.district }}
                    {{ order.address }}
                    {% if order.zip_code %}
                        <span class="text-muted">({{ order.zip_code }})</span>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <!-- 订单信息卡片 -->
        <div class="order-detail-card">
            <h2 class="order-detail-title">订单信息</h2>
            
            <ul class="order-info-list">
                <li class="order-info-item">
                    <span>订单号</span>
                    <span>{{ order.order_id }}</span>
                </li>
                <li class="order-info-item">
                    <span>创建时间</span>
                    <span>{{ order.created_time|date:"Y-m-d H:i:s" }}</span>
                </li>
                <li class="order-info-item">
                    <span>支付方式</span>
                    <span>{{ order.get_pay_method_display }}</span>
                </li>
                {% if order.pay_time %}
                <li class="order-info-item">
                    <span>付款时间</span>
                    <span>{{ order.pay_time|date:"Y-m-d H:i:s" }}</span>
                </li>
                {% endif %}
                {% if order.trade_no %}
                <li class="order-info-item">
                    <span>支付交易号</span>
                    <span>{{ order.trade_no }}</span>
                </li>
                {% endif %}
                {% if order.deliver_time %}
                <li class="order-info-item">
                    <span>发货时间</span>
                    <span>{{ order.deliver_time|date:"Y-m-d H:i:s" }}</span>
                </li>
                {% endif %}
                {% if order.receive_time %}
                <li class="order-info-item">
                    <span>收货时间</span>
                    <span>{{ order.receive_time|date:"Y-m-d H:i:s" }}</span>
                </li>
                {% endif %}
                {% if order.remark %}
                <li class="order-info-item">
                    <span>订单备注</span>
                    <span>{{ order.remark }}</span>
                </li>
                {% endif %}
            </ul>
        </div>
    </div>
</div>
{% endblock %} 